<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :span="8">
          <div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" clearable @clear="searchName()" @keyup.enter.native="searchName()"
              class="input-with-select" v-model="inputValue">
              <template #append>
                <el-button @click="searchName()">搜索3</el-button>
              </template>
            </el-input>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="16" :lg="14" :xl="12" :span="4" v-show="searchShow">
          <el-button type="primary" @click="dialogVisible = true">高级搜索</el-button>
        </el-col>
        <el-table :data="tabList" :height="autoHeight" border stripe style="width: 100%" @row-click="getInfo"
          :highlight-current-row="true" table-layout="auto">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column v-for="(item, index) in getTableHeads()" :key="item.label" :prop="item.prop"
            :label="item.label" :width="item.width" show-overflow-tooltip>
            <template v-if="item.label == '更新日期'" #default="scope">
              {{ $filters.dateFormat(scope.row.updateTime) }}
            </template>
            <template v-slot="{ row }" v-if="item.label == '功能主治'">
              <!-- 将 HTML 字符串转换为 DOM 对象并渲染 -->
              <span v-html="row.infoGnzz"></span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-config-provider :locale="zhCn">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-config-provider>
      </el-row>
    </el-card>
    <!-- 高级搜索弹出层 -->
    <dia_log :show="dialogVisible" @toggleDialog="toggleDialog" @expertSearch="expertSearch"></dia_log>
  </div>
</template>
<script setup>
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import dia_log from "../components/dialog.vue";
// 引入axios
import { get, post } from '../plugin/axios'
const { proxy } = getCurrentInstance(); // 解构
console.log('proxy对象：', proxy);
import { onMounted, ref, reactive, watchEffect, getCurrentInstance, watch, computed } from "vue";
//引入路由
import { useRouter } from "vue-router";
let router = useRouter()
//引入 pinia 
import { useCounterStore } from "@/stores/counter";
const useStore = useCounterStore()
//导入父组件传递的值
const props = defineProps(['activePath'])
// 导入列表头
import tableHead from "@/assets/tableHead.json";
// 声明响应形式变量========================================================================================
let total = ref(0) //总计
let autoHeight = ref(null)
let page = ref(1) //页数
let pageSize = ref(20) //条数
let dialogVisible = ref(false)
let inputValue = ref('') // 搜索框输入的内容
let tabList = reactive([]) //列表数据
autoHeight = window.innerHeight * 0.73 + 'px'
getList()
// 计算属性===============================================================
const searchShow = computed(() => {
  const showFlag = ref(true)
  const array = ref(['102', '103', '202', '203'])
  array.value.forEach((item) => {
    if (item == props.activePath) {
      showFlag.value = false
    }
  })
  return showFlag.value
})
//监听属性===============================================================
watch(inputValue, (newValue, oldvalue) => {
  console.log(newValue, oldvalue);
})

watch(() => props.activePath, () => {
  console.log(props.activePath);
  initData()
})
// 业务处理逻辑========================================================================================
// 
function getTableHeads() {
  switch (props.activePath) {
    case '202': case '203':
      return tableHead.zxbm
      break;
    case '302': case '303': case '304':
      return tableHead.zcy
      break;
    default:
      break;
  }
}
// 获取数据
function getList() {
  var param = {}
  let url = ''
  //判断activePath值调用不同接口，获取不同数据
  switch (props.activePath) {
    case '102':
      param = {
        status: null,
        name: inputValue.value,
        size: pageSize.value,
        type: 3,
        origin_type: 'baidubaike/diseaseZy/diseaseXy/symptomZy/symptomXy',
        symptom_zy_batch: null,
        symptom_xy_batch: null,
      }
      url = '/api/xybz/data_all_zxy/getPartList'
      break;
    case '103':
      param = {
        status: null,
        name: inputValue.value,
        size: pageSize.value,
        type: 4,
        origin_type: 'baidubaike/diseaseZy/diseaseXy/symptomZy/symptomXy',
        symptom_zy_batch: null,
        symptom_xy_batch: null,
      }
      url = '/api/xybz/data_all_zxy/getPartList'
      break;
    case '202':
      param = {
        rows: pageSize.value,
        name: encodeURI(inputValue.value),
        type: 1,
      }
      url = '/api/yyjk/disease/list'
      break;
    case '203':
      param = {
        rows: pageSize.value,
        name: encodeURI(inputValue.value),
        type: 0,
      }
      url = '/api/yyjk/disease/list'
      break;
    case '302':
      param = {
        rows: pageSize.value,
        name: encodeURI(inputValue.value),
        type: 1,
      }
      url = '/api/yyjk/medicine/list'
      break;
    case '303':
      param = {
        rows: pageSize.value,
        name: encodeURI(inputValue.value),
      }
      url = '/api/yyjk/herbal/list'
      break;
    case '304':
      param = {
        rows: pageSize.value,
        name: encodeURI(inputValue.value),
        type: -1,
      }
      url = '/api/yyjk/medicine/list'
      break;
    default:
      break;
  }
  param.page = page.value
  get(url, param).then(res1 => {
    if (url.indexOf('yyjk') > -1) {
      let rows = res1.rows;
      rows.forEach(item => {
        item.name = item.infoYm || item.info_name
      });
      tabList.length = 0
      Object.assign(tabList, rows)
      total.value = res1.records
    } else {
      if (res1.list.length > 0) {
        res1.list.forEach(item => {
          item.name = item.info_name
        });
        tabList.length = 0
        Object.assign(tabList, rows)
        total.value = res1.totalNum
      }
    }
  })
}
//初始化数据
function initData() {
  Object.assign(tabList, [])
  total.value = 0
  page.value = 1
  pageSize.value = 20
  getList();
}
//每页条数改变时触发
function handleSizeChange(newsize) {
  console.log(newsize)
  pageSize.value = newsize
  getList()
}
//页数发生改变时触发
function handleCurrentChange(newpage) {
  console.log(newpage)
  page.value = newpage
  getList()
}
//搜索事件
function searchName() {
  page.value = 1
  getList()
}
//点击列表数据，查看详情
function getInfo(row, column, event) {
  useStore.$patch((state) => {
    state.dataInfo = row
  })
  //window.sessionStorage.setItem('infoData', proxy.$qs.stringify(row))
  router.push('/info')
  //window.open('/info','_blank')
}
// 高级搜索
function openSearch() {

}
//关闭搜索弹层
function toggleDialog() {
  dialogVisible.value = false
}
//高级搜索
function expertSearch(data) {
  get('/api/zybz/herbal/all/es/complexSearch', data).then(res1 => {
    let result = res1.result;
    result.forEach(item => {
      item.updateTime = 0
      item.infoGnzz = item.info_gnzz
      item.name = item.info_ym
    });
    tabList.length = 0
    Object.assign(tabList, result)
    total.value = res1.totalNum
  })
}
</script>
<style lang="less" scoped></style>